import React, { Component } from 'react';
import './icon.css'
import './App.scss'
class App extends Component {
  /* 数量减 */
  handleSub = (index)=>{
    let products = this.state.products;
    if(products[index].num>1){
      --products[index].num;
    }
    this.setState({
      products:products,
    })
  };
  /* 数量加 */
  handleAdd = (index)=>{
    let products = this.state.products;
    ++products[index].num;
    this.setState({
      products:products,
    })
  };
  /* 计算总价 */
  getTotalPrice = (params)=>{
    let totalPrice = 0;
    this.state.products.map(item=>{
      if(item.ischecked) {
        totalPrice += item.num*item.price;
      }
    })
    return totalPrice
  };
  /* 计算商品总量 */
  getSelectNum = (params)=>{
    let selected_num = 0;
    this.state.products.map(item=>{
      if(item.ischecked){
        selected_num+=item.num;
      }
    })
    return selected_num;
  };
  // 状态存储
  state = {
    selectNum: 0,// 已选择商品的数量
    totalPrice:0,// 已选择的商品总价
    products:[
      {
        id:1,
        message:'黑科技分区控温，95%鹅绒抗菌儿童鹅绒被',
        imgUrl:'https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75',
        price:568,
        origin_price: 599,
        num:1,
        ischecked: true
      },
      {
        id:2,
        message:'黑科技分区控温，95%鹅绒抗菌儿童鹅绒被',
        imgUrl:'https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75',
        price:568,
        origin_price: 599,
        num:1,
        ischecked: true
      },
      {
        id:3,
        message:'黑科技分区控温，95%鹅绒抗菌儿童鹅绒被',
        imgUrl:'https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75',
        price:568,
        origin_price: 599,
        num:1,
        ischecked: true
      },
      {
        id:4,
        message:'黑科技分区控温，95%鹅绒抗菌儿童鹅绒被',
        imgUrl:'https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75',
        price:568,
        origin_price: 599,
        num:1,
        ischecked: true
      },
      {
        id:5,
        message:'黑科技分区控温，95%鹅绒抗菌儿童鹅绒被',
        imgUrl:'https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75',
        price:568,
        origin_price: 599,
        num:1,
        ischecked: true
      },
      {
        id:6,
        message:'黑科技分区控温，95%鹅绒抗菌儿童鹅绒被',
        imgUrl:'https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75',
        price:568,
        origin_price: 599,
        num:1,
        ischecked: true
      },
      {
        id:7,
        message:'黑科技分区控温，95%鹅绒抗菌儿童鹅绒被',
        imgUrl:'https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75',
        price:568,
        origin_price: 599,
        num:1,
        ischecked: true
      }
    ]
  }
  render() {
    return (
      <div className='cart'>
        {/* 购物车列表 */}
        <div className="cart-list">
          {/* 商品项目 */}
          {
            this.state.products.map((item,index)=>{
              return (
                <div className="list-item" key={item.id}>
            {/* 左边选项 */}
            <div className="list-item-left">
              <i className='iconfont icon-fenlei'></i>
            </div>
            {/* 中间图片 */}
            <div className="list-item-mid">
              <img src={item.imgUrl} alt=""/>
            </div>
            {/* 右边详情 */}
            <div className="list-item-right">
              <div className='item-message'>{item.message}</div>
              <div className="item-price-num">
                <div className="item-price">
                  <span className="price">￥{item.price}</span>
                  <span className="origin-price">￥{item.origin_price}</span>
                </div>
                <div className="item-num">
                  <span className="sub" onClick={this.handleSub.bind(this,index)}>-</span>
                  <span className="num">{item.num}</span>
                  <span className="add" onClick={this.handleAdd.bind(this,index)}>+</span>
                </div>
              </div>
            </div>
          </div>
              )
            })
          }
        </div>
        {/* 底部功能区 */}
        <div className="bottom-func">
          {/* 选择 */}
          <div className="func-left">
            <i className="iconfont icon-fenlei"></i>
            <span className="checked">已选({this.getSelectNum()})</span>
          </div>
          {/* 金额和下单 */}
          <div className="func-right">
            <div className="func-allprice">
              <div className='total-price'>合计:￥{this.getTotalPrice()}</div>
              <div className="discounted">已优惠:￥50</div>
            </div>
            <div className="func-order">
              <span className='order'>下单</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
